<template>
<div>
  <!-- <image class="pageImg" src="root:img/page/13.png" /> -->
  <head title="Refund"></head>
  <div class="pageContent">
    <div class="orderDetail">
      <div class="order_top">
        <image class="googPic" :src="goodsInfo.thumb" />
        <div class="goods_info">
          <text class="goods_title">{{goodsInfo.title}}</text>

          <text class="specText">{{goodsInfo.goods_option}}</text>
          <text class="specText">Total price: {{goodsInfo.total_price}}</text>
        </div>
        <text class="price">{{goodsInfo.number}}*{{goodsInfo.price}}</text>
      </div>
    </div>
    <div class="messagebox">
      <div class="locationBox row jbew atop bb" @click="popType='service',showMask=true">
        <text class="meth_title locaTit">Service type</text>
        <div class="meth_right row jend atop">
          <text class="cityName">{{selected.label?selected.label:'Please select'}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div class="locationBox row jbew atop bb" @click="popType='status',showMask=true">
        <text class="meth_title locaTit">Delivery status</text>
        <div class="meth_right row jend atop">
          <text class="cityName">{{receiveStatu.label?receiveStatu.label:'Please select'}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
      <div class="locationBox row jbew atop" @click="popType='reasons',showMask=true">
        <text class="meth_title locaTit">Reasons for refund</text>
        <div class="meth_right row jend atop">
          <text class="cityName">{{reason.label?reason.label:'Please select'}}</text>
          <text class="rightIcon">&#xe6a1;</text>
        </div>
      </div>
    </div>

    <div class="selBox" v-if="selected.value==3">
      <text class="selTix">Exchange</text>
      <textarea class="textarea" v-model="changeItenm" placeholder="Remarks to change item"></textarea>
    </div>

    <div class="selBox">
      <text class="selTix mb20">Please upload item receipt</text>

      <div class="imgBox">
        <div class="photoBor" v-for="(item,index) in imgView" :key="index">
          <image class="photoItem" :src="item" resize="cover" />
          <image @click="removePhoto(index)" class="photodel" src="root:img/delete.png" alt />
        </div>
        <!-- <image @click="pickPhoto" class="clickPhoto" src="root:img/photo.png" /> -->
        <div class="photoBox">
          <image @click="pickPhoto" class="clickPhoto" src="root:img/photo.png" resize="contain" />
          <input v-if="isWeb" class="fileInput" type="file" value id="file" @change="uploadConfig" />
        </div>
      </div>
    </div>
  </div>
  <div class="settlement">
    <text class="btn" @click="changeAlert('s')">Submit</text>
  </div>
  <wxc-popup
    height="600"
    pos="bottom"
    ref="wxcpopup"
    :show="showMask"
    @wxcPopupOverlayClicked="showMask=false"
  >
    <!-- 服务类型 -->
    <div class="shopAlert" @click="e=>e.stopPropagation()" v-if="popType=='service'">
      <text class="alertTop">Service type</text>
      <scroller class="alertScroll">
        <div class="selectLi" v-for="item in shippWay" :key="item.value" @click="selected=item">
          <text
            class="liIcon"
            :class="[selected.value==item.value?'selected':'']"
          >{{selected.value==item.value?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[selected.value==item.value?'selected':'']">{{item.label}}</text>
        </div>
      </scroller>
    </div>
    <div class="shopAlert" @click="e=>e.stopPropagation()" v-if="popType=='status'">
      <text class="alertTop">Service type</text>
      <scroller class="alertScroll">
        <div
          class="selectLi"
          v-for="item in receiveStatus"
          :key="item.value"
          @click="receiveStatu=item"
        >
          <text
            class="liIcon"
            :class="[receiveStatu.value==item.value?'selected':'']"
          >{{receiveStatu.value==item.value?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[receiveStatu.value==item.value?'selected':'']">{{item.label}}</text>
        </div>
      </scroller>
    </div>
    <div class="shopAlert" @click="e=>e.stopPropagation()" v-if="popType=='reasons'">
      <text class="alertTop">Service type</text>
      <scroller class="alertScroll">
        <div class="selectLi" v-for="item in reasonArr" :key="item.value" @click="reason=item">
          <text
            class="liIcon"
            :class="[reason.value==item.value?'selected':'']"
          >{{reason.value==item.value?"&#xe602;":"&#xe67f;"}}</text>
          <text class="liTxt" :class="[reason.value==item.value?'selected':'']">{{item.label}}</text>
        </div>
      </scroller>
    </div>
    <text class="sureBtn" @click="hidePop('wxcpopup')">Confirm</text>
  </wxc-popup>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
const navigator = weex.requireModule("navigator");
const selectAddress = new BroadcastChannel("selectAddress");
const photo = weex.requireModule("photo");
const net = weex.requireModule("net");
import { WxcPopup } from "weex-ui";
import asCore from "../../../mixin/core";

import { upload, add_refund } from "../../../mixin/ajax.js";
export default {
  components: { WxcPopup },
  data() {
    return {
      //是否显示遮罩层
      showMask: false,
      changeItenm: "",
      popType: "",
      selected: {
        value: "1",
        label: "Refund"
      },
      shippWay: [
        { value: "1", label: "Refund" },
        { value: "3", label: "Exchange" }
      ],
      reason: {
        value: "",
        label: ""
      },
      reasonArr: [
        { value: "Changed mind", label: "Changed mind" },
        { value: "Faulty item", label: "Faulty item" },
        { value: "Delivery of wrong item", label: "Delivery of wrong item" },
        { value: "Damaged item", label: "Damaged item" },
        { value: "Other", label: "Other" }
      ],
      receiveStatu: {
        value: "1",
        label: "Item received"
      },
      receiveStatus: [
        { value: "1", label: "Item received" },
        { value: "2", label: "Item unreceived" }
      ],
      imgView: [],
      imgList: [],
      addressData: {
        id: 11,
        name: "",
        phone: "",
        province: "",
        city: "",
        area: "",
        address: "",
        is_default: 1,
        create_time: ""
      },
      goodsInfo: {},
      sumPrice: "52.30",
      goods_title: "",
      users_id: ""
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.users_id = userId;
    });
  },
  methods: {
    hidePop(name) {
      this.$refs[name].hide();
    },
    onLoad(parmar) {
      if (parmar) {
        if (parmar.parmar) {
          return false;
        }
        if (parmar.data) {
          this.goodsInfo = parmar.data;
        }
      }
    },

    changeAddress(msg) {
      this.addressData = msg.data;
    },

    setAddress() {
      this.push("root:app/user/address/address.js");
    },
    toPay() {
      this.push("root:app/pay/payment.js");
    },
    pickPhoto() {
      var self = this;
      photo.open(500, 800, "#000000", "#ffffff", "#ffffff", function(e) {
        self.src = e.path;
        upload({ type: 2, file: e.path }, res => {
          self.isLoading = false;
          if (res.res.message) {
            self.toast(res.res.message);
          }
          if (res.res.code == 200) {
            self.imgList.push(res.res.data.file_url);
            self.imgView.push(e.path);
          }
        });
      });
    },
    removePhoto(index) {
      this.imgList.splice(index, 1);
      this.imgView.splice(index, 1);
    },
    uploadConfig(event) {
      let self = this;
      let file = event.target.files[0];
      // let param = new FormData(); // 创建form对象
      self.isLoading = true;
      upload({ type: 3, file: file }, res => {
        self.isLoading = false;
        if (res.message) {
          self.toast(res.message);
        }
        if (res.code == 200) {
          self.imgList.push(res.data.file_url);
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            self.imgView.push(e.target.result);
          };
        }
      });
    },
    changeAlert(type) {
      if (!this.reason.value) {
        this.toast("Please pick your reason");
        return false;
      }
      let file = this.imgList.map(item => {
        return { file_url: item, type: 1 };
      });
      this.isLoading = true;
      add_refund(
        {
          users_id: this.users_id,
          order_id: this.goodsInfo.id,
          refund_type: this.selected.value,
          goods_status: this.receiveStatu.value,
          refund_reason: this.reason.value,
          file: file
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              // this.back();
              this.push("root:app/user/order_list/refundDetail.js", {
                goodInfo: this.goodsInfo
              });
            } else {
              this.alert(res.message);
            }
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.pageImg {
  width: 750px;
  height: 1334px;
}

.pageContent {
  /* margin-top: -1334px; */
  background-color: #f2f2f2;
  flex: 1;
  width: 750px;
}

.orderDetail {
  padding: 30px;
  background-color: #fff;
}

.order_top {
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  /* border-bottom-style: solid;
		border-bottom-color: #e6e6e6;
		border-bottom-width: 2px; */
  /* padding-bottom: 20px; */
}

.googPic {
  width: 120px;
  height: 120px;
}

.goods_info {
  padding-left: 30px;
  flex: 1;
  justify-content: flex-start;
}

.goods_title {
  font-size: 22px;
  line-height: 30px;
  color: #666666;
}

.goods_spec {
  padding-top: 30px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
}

.priceInfo {
  flex-direction: row;
  align-items: center;
}

.specInfo {
  height: 42px;
  justify-content: space-between;
  padding: 0 5px;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  flex-direction: row;
  /* background-color: #f2f22f; */
}

.specText {
  font-size: 20px;
  /* height: 40px;
		line-height: 40px; */
  /* margin-left: 10px; */
  margin-right: 25px;
  color: #666;
  margin-top: 10px;
}

.iconDown {
  font-size: 22px;
  font-family: iconfont;
  line-height: 40px;
  color: #999;
}

.methodBox {
  width: 750px;
  height: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 32px;
  background-color: #fff;
}

.messagebox {
  width: 750px;
  margin-top: 20px;
  padding: 0 30px 30px;
  background-color: #fff;
}

.locationBox {
  width: 690px;

  padding: 30px 0;
}
.bb {
  border-bottom-style: solid;
  border-bottom-color: #ededed;
  border-bottom-width: 1px;
}

.meth_title {
  color: #323232;
  font-size: 30px;
}

.locaTit {
  width: 300px;
}

.meth_right {
  flex: 1;
  justify-content: flex-end;
}

.shipping {
  margin-right: 30px;
  font-size: 30px;
  color: #999999;
}

.cityName {
  margin-right: 30px;
  font-size: 30px;
  color: #666666;
  flex: 1;
  text-align: right;
}

.rightIcon {
  font-family: iconfont;
  font-size: 26px;
  color: #999;
}

.row {
  flex-direction: row;
}

.jbew {
  justify-content: space-between;
}

.jend {
  justify-content: flex-end;
}

.atop {
  align-items: flex-start;
}

.acen {
  align-items: center;
}

.footer {
}

.settlement {
  width: 750px;
  height: 100px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  height: 40px;
  width: 40px;
}
.sum {
  flex: 1;
  font-size: 28px;
  padding-left: 30px;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}

.sumTitle {
  font-size: 30px;
  margin-right: 20px;
}

.symbol {
  color: #ed404c;
}

.money {
  font-weight: 600;
  color: #ed404c;
  font-size: 36px;
}

.photoBox {
  position: relative;
  width: 140px;
  height: 140px;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 10px;
  margin: 10px;
}

.photoBor {
  position: relative;
  width: 160px;
  height: 160px;
  justify-content: center;
  align-items: center;

  border-radius: 10px;
  margin-right: 15px;
  padding: 10px;
}

.photoItem {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  background-color: #f8f8f8;
}

.photodel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
}
.photoBox:active {
  background-color: #f2f2f2;
}

.clickPhoto {
  width: 60px;
  height: 60px;
}

.fileInput {
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
  height: 140px;
  opacity: 0;
}

.btn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
  border-radius: 4px;
}
.btn:active {
  background-color: #000;
}

.hidemask {
  height: 0;
}

.maskAlert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 456px;
  top: 0;
  /* background-color: rgba(0, 0, 0, 0); */
}

.shopAlert {
  padding: 32px;
  flex: 1;
}

.alertTop {
  width: 686px;
  text-align: left;
  padding-bottom: 32px;
  font-size: 28px;
  color: #333333;
}

.alertScroll {
  flex: 1;
}

.selectLi {
  /* margin-bottom: 30px; */
  height: 70px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 750px;
  padding-left: 32px;
}

.liIcon {
  font-size: 40px;
  font-family: iconfont;
  color: #999999;
  margin-right: 10px;
}

.liTxt {
  color: #999999;
  font-size: 28px;
}

.selected {
  color: #ba8833;
}

.sureBtn {
  width: 686px;
  height: 80px;
  line-height: 80px;
  border-radius: 10px;
  margin-bottom: 14px;
  background-color: #303030;
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-left: 32px;
}
.sureBtn:active {
  background-color: #000;
}

.textarea {
  height: 160px;
  padding: 20px 0;
}

.imgBox {
  margin-bottom: 10px;
  flex-direction: row;
}
.selBox {
  width: 750px;
  padding: 15px 32px;
  margin-top: 20px;
  background-color: #ffffff;
}
.selTix {
  font-size: 28px;
  color: #000;
  padding-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.clickPhoto {
  width: 71px;
  height: 64px;
  margin-right: 10px;
}
</style>
